<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>
<body>
    <div class="w-[428px] h-[206px] flex justify-evenly">
        <div class="flex w-[210px] h-[206px] flex-col items-center rounded-[23px] bg-slate-200 p-7">
            <div class="justify-center">
                <img class="justify-center w-[85px] h-[85px] " src="images/class1.jpg" alt="">
            </div>
            <div class="justify-center items-center flex text-black text-xs p-2">优</div>
            <div class="justify-center items-end flex gap-1 text-green-400">
                <div class="text-2xl">AQI</div>
                <div class="text-2xl">48</div>
            </div>
        </div>
        <div class="flex w-[210px] h-[206px] flex-col items-center rounded-[23px] bg-red-200 p-7">
            <div class="justify-center">
                <img class="items-center w-[85px] h-[85px] " src="images/class2.jpg" alt="">
            </div>
            <div class="flex justify-center items-center  text-black p-2">全国预警数量</div>
            <div class="justify-center items-end flex gap-1 text-red-400">
                <div class="text-2x1">689</div>
            </div>
        </div>
    </div>
    <div class="flex items-center w-[428px] h-[208px]  rounded-[23px] bg-gradient-to-r from-[#6ee3fb] to-[#77b6e3]">
        <div class="">
        <div class="text-black">和风天气APP</div>
        <div class="text-gray-500">全球可视化天气应用</div>
</div>
</div>
</body>
</html>